<template>
  <div class="home-con">
    <!-- <el-form :model="formData.formConfig.form" :label-position="formData.formConfig.labelPosition"
      :size="formData.formConfig.size" :rules="rules" ref="form" label-width="100px" class="clearfix demo-form">
      <el-row class="row" :gutter="20">

        <el-col :offset="item.offset" :span="colSpan(item)" :class="{ 'drag-move': !!item.label }"
          v-for="(item) in formData.formList" :key="item.id">
          <div class="list-group-item">
            <el-form-item v-if="item.label" :label="item.label" :prop="item.key">
              <Node :form="formData.formConfig.form" :config="item"></Node>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form> -->

    <FormBuild :key="key" :preview="preview" :formTemplate="formTemplate" :models="models" :config="ngConfig"
        ref="formBuild" :customComponents="customComponents" />
        
  </div>
</template>

<script>
import FormBuild from '@/components/packages/form-design/build.vue'
// import Node from '@/components/Node/index.vue'
import { mapGetters } from 'vuex';
import { iframeDispose } from '@/utils/iframeMeans.js'
export default {
  components: { 
    // Node,
    FormBuild 
  },
  props: {},
  data() {
    return {
      formData: {
        formList: [],
        formConfig: {
          form: {},
          labelPosition: "left",
          size: "small",
        }

        // formList: [
        //   {
        //     "type": "input",
        //     "label": "输入框",
        //     "order": 1,
        //     "id": 1691369208076,
        //     "colSpan": 24,
        //     "labelWidth": 24,
        //     "key": "basic_input_1691369208076",
        //     "disabled": false,
        //     "placeholder": "请输入"
        //   },
        //   {
        //     "type": "slider",
        //     "order": 2,
        //     "id": 1691369417138,
        //     "config": {},
        //     "checkList": [
        //       { "label": "项目1", "value": "1" },
        //       { "label": "项目2", "value": "2" }
        //     ],
        //     "label": "滑块",
        //     "labelWidth": 24,
        //     "key": "basic_slider_1691369417137", "disabled": false
        //   }, {
        //     "type": "radio",
        //     "label": "单选框",
        //     "order": 2,
        //     "id": 1691369420131,
        //     "config": {},
        //     "checkList": [
        //       { "label": "项目1", "value": "1" },
        //       { "label": "项目2", "value": "2" },
        //       { "label": "项目2", "value": "3" },
        //       { "label": "项目2", "value": "4" }
        //     ],
        //     "labelWidth": 24,
        //     "key": "basic_radio_1691369420131",
        //     "disabled": false
        //   }, {
        //     "type": "slider",
        //     "order": 2,
        //     "id": 1691369440816,
        //     "config": {},
        //     "checkList": [
        //       { "label": "项目1", "value": "1" },
        //       { "label": "项目2", "value": "2" }
        //     ],
        //     "label": "滑块",
        //     "labelWidth": 24,
        //     "key": "basic_slider_1691369440815",
        //     "disabled": false
        //   }],
        // formConfig: {
        //   "labelPosition": "left",
        //   "size": "small",
        //   "form": {
        //     "basic_slider_1691369417137": 0,
        //     "basic_slider_1691369440815": 0
        //   }
        // }

      },
      rules: {},
      
      models: {},
      formTemplate: {
        list: [],
        config: {
          labelPosition: "left",
          labelWidth: 100,
          size: 'mini',
          outputHidden: true,
          hideRequiredMark: false,
          syncLabelRequired: false,
          customStyle: ""
        }
      },
      key: '1',
      preview: false, // '填报模式' 和 '查看模式'
      dataJson: ''
    }
  },
  // inject: [],
  inject: {
    // 自定义组件
    customComponents: {
      from: 'customC',
      default: () => []
    },
    ngConfig: {
      from: 'ngConfig',
      default: () => { return {} }
    },
  },
  created() {
    console.log(57, this.formData);
  },
  computed: {
    ...mapGetters(['isIframe'])
  },
  mounted() {
    if (!this.isIframe) return
    window.addEventListener('message', async (e) => {
      const data = await iframeDispose(e.data)
      console.log(106, data);
      this.getFormData(data)
    }, false)
  },
  methods: {
    colSpan(item) {
      if (!item.offset) {
        return item.labelWidth || 24
      } else {
        return item.labelWidth || (24 - item.offset)
      }
    },
    getFormData(data) {
      console.log(data?.model_main?.form_content);
      if (!data?.model_main?.form_content) return
      this.formData = JSON.parse(data.model_main.form_content)
      this.formTemplate = this.formData
      // this.formData.formList.forEach(item => {
      //   delete item.component
      // })
      // console.log(123, this.formData);
    },
    // dragChange(e) {
    //   // console.log('dragChange', e);
    //   const element = e.added?.element || e.moved?.element
    //   this.setSelectedSubassembly(element)
    // },
    handleValidator() {
      // 校验
      this.$refs.formBuild.validate()
    },
    // 获取数据
    handleGetData() {
      const models_ = this.$refs.formBuild.getData(true)
      console.log(186, models_);
      this.dataJson = JSON.stringify(models_, null, "\t")
    },
  },
}
</script>

<style scoped lang="scss">
.demo-form {
  width: 100%;
  height: 100%;

  .el-row {
    transform: translateX(10px);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .draggable-box {
    width: 100%;
    height: 100%;
  }

  .items-main {
    height: 100%;
    padding: 0 10px;
  }
}

.list-group-item {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 4px;
  margin-top: 10px;
  padding: 10px;
  overflow: hidden;

  &:hover {
    .list-group-item-operate {
      display: block;
    }
  }

  .list-group-item-operate-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1999;
  }

  .list-group-item-operate {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
    background-color: #409EFF;
    border: 1px solid #409EFF;
    border-radius: 0 4px 4px 4px;
    padding: 2px;
  }

  .icon {
    cursor: pointer;
    margin: 6px;
  }
}

.change-list-group-item {
  background-color: #edf5ff;
  border: 1px solid #4ba0fc;
}

.chosenClass {
  // background-color: red;
}
</style>